<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>JavaScript访问DOM数案例</h3>
		<a href="https://www.taobao.com" target="_blank">淘宝</a>
		<a class="jd" href="https://www.jd.com" target="_blank">京东</a>
		<a name="pdd"  href="https://www.pinduoduo.com" target="_blank">拼多多</a>
		<a  id="cgb" href="http://gy.tedu.cn/" target="_blank">达内</a>
		
		<!--页面上使用javascript，通过script标签来实现
		type=“text/javascript”新标准可以省略，默认
		scr="" 引入外部
		js中可以使用单引号和双引号来吧字符串括起来
		
		js出错是不提示的，F12空调能看到错误
		-->
		<script >
		//	window.alert("使用js获取页面元素");//BOM中提供弹出框api
			
			//获取页面a标签。antagName方式返回时一个数组
			//第一个元素:arr[0],下标从0开始
			//谷歌浏览器提供console方式
			
			//页面-老方式:
			//alert(document.getElementsByTagName("a")[0]);//得到页面上所有a元素
			//alert(document.getElementsByTagName("a")[0].innerText)
			
			//第一种方式：tagname
			console.log(document.getElementsByTagName("a")[0].innerText);//a标签内容
			console.log(document.getElementsByTagName("a")[0].href);//a标签的href属性
			
			//第二章方式：classname方式
            console.log(document.getElementsByClassName("jd")[0].innerText)
            console.log(document.getElementsByClassName("jd")[0].href)
						
			//第三种方式：name方式
			console.log(document.getElementsByName("pdd")[0].innerText);
			console.log(document.getElementsByName("pdd")[0].href);
			
			//第四种方式:id方式--其获得的是一个值，无需数组方式
			console.log(document.getElementById("cgb").innerText);
			console.log(document.getElementById("cgb").href);
			
			//修改页面值
			//html是静态的   css是美化的   js可以
		  	//document.getElementsByTagName("a")[0].innerText="哈哈"
			
			  //便捷方法---定义变量a，后面可以操作a
               var a = document.getElementsByName("pdd")[0];
               			a.innerText = "百度";
               			a.href = "http://www.baidu.com";
		</script>
	</body>
</html>
